<template>
	<view class="back_card">
		<view class="back_card_list">
			<scroll-view @scrolltolower="scrolltolower" :scroll-y="true" class="sele_ul">
				<view class="card_list">
					<view class="card_item" @click="goCardDetail(item.id)" v-for="(item,index) in cardList.rows"
						:key="index">
						<ImgCard :refName="`imgRef${index}`" :name="item.name" :code="item.code"></ImgCard>
					</view>
					<view class="list_no_card" v-if="cardList.rows.length==0">
						<uni-icons class="tip" type="wallet" color="#cccc" size="60"></uni-icons>
						<view class="tip">没有银行卡，请添加！</view>
					</view>
					<view class="add_card" @click="goAddCard">
						<uni-icons type="plusempty" size="20" class="add_card_icon"></uni-icons> 添加银行卡
					</view>
				</view>
			</scroll-view>
		</view>


	</view>
</template>

<script lang="ts" setup>
	import {
		ref,
		onMounted
	} from "vue";
	import apiAccount from '@/util/network_api/account.js'
	import ImgCard from "../myAccount/component/ImgCard.vue"
	import { onUnload, onLaunch, onLoad, onHide, onShow } from '@dcloudio/uni-app'

	onUnload(() => {
		uni.hideLoading()
	})
	onLoad(() => {
		getCardList()
	})
	const goAddCard = () => {
		uni.redirectTo({
			url: '/pages_network/home/myAccount/addCard'
		})
	}
	// 银行卡详情
	const goCardDetail = (id) => {
		uni.navigateTo({
			url: "/pages_network/home/myAccount/cardDetail?id=" + id
		})
	}
	const dataPages = ref({
		"limit": 10,
		"page": 1
	})
	// 获取列表
	const cardList = ref({ rows: [], total: 0 })
	const getCardList = () => {
		uni.showLoading({
			title: '加载中',
		});
		apiAccount.getBandList(dataPages.value).then(res => {
			uni.hideLoading()
			if (res.success) {
				if (dataPages.value.page > 1) {
					cardList.value.rows = [...cardList.value.rows, ...res.data.rows]
					cardList.value.total = res.data.total
				} else {
					cardList.value = res.data
				}

			}
		})
	}
	const scrolltolower = () => {
		if (cardList.value.total > cardList.value.rows.length) {
			dataPages.value.page += 1
		}
	}
</script>

<style lang="scss" scoped>
	.back_card {
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: hidden;
		background-color: #fafafa;
		padding: 32rpx;
		box-sizing: border-box;

		.list_no_card {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 10vh 40rpx 10vh;
			color: #999;
			gap: 40rpx;

			.tip {
				display: flex;
				align-items: center;
				font-size: 28rpx;
			}
		}

		&_list {
			display: flex;
			flex-direction: column;
			flex: 1;
			overflow: hidden;

			.sele_ul {
				height: 100%;

				::-webkit-scrollbar {
					display: none;
					width: 0 !important;
					height: 0 !important;
					-webkit-appearance: none;
					background: transparent;
					color: transparent;
				}



				.card_list {
					padding-bottom: 12vh;

					.card_item {
						flex: 1;
					}
				}
			}
		}

		.add_card {
			font-weight: bold;
			background-color: #fff;
			padding: 40rpx 24rpx;
			font-size: 30rpx;
			display: flex;
			align-items: center;

			.add_card_icon {
				margin-right: 12rpx;
			}
		}
	}
</style>